<!-- 主送、分送、抄送 -->
<template>
	<van-action-sheet v-model="showCompo" :close-on-click-overlay="false" @closed="closeSheet" title="名称">
		<view class="search-add">
			<van-search v-model="searchValue" show-action :clearable="false" @input="searchListener"
				placeholder="请输入搜索关键词">
				<template #action>
					<van-button type="info" plain size="small" @click="onAdd">增加</van-button>
				</template>
			</van-search>
		</view>
		<view class="content">
			<!-- <van-contact-card type="add" @click="onAdd" add-text="添加更多单位"/> -->
			<van-popup class="popup-box" v-model:show="addMore" closeable round>
				<van-form @submit="onSubmit">
					<van-cell-group inset>
						<van-field v-model="formData.tagId" name="tagId" label="tagId" v-show="false" />
						<van-field v-model="formData.content" name="名称" label="名称" placeholder="名称"
							:rules="[{ required: true, message: '请填写名称' }]" />

					</van-cell-group>
					<div style="margin: 16px;">
						<van-button round block type="info" native-type="submit">
							提交
						</van-button>
					</div>
				</van-form>

			</van-popup>
			<van-list v-model="loading" :finished="finished" @load="load">
				<view v-show="emptyData" class="text-center text-gray padding-top-sm">暂无数据</view>
				<van-checkbox-group v-model="result" @change="onChange">
					<van-cell-group>
						<van-cell v-for="(item, index) in dataArr" clickable :key="index" :title="item.content"
							@click="toggle(index)">
							<template #right-icon>
								<van-button type="warning" plain size="mini" @click="deleteItem(index)">删除</van-button>
								<van-button type="info" plain size="mini" @click="editItem(index)">修改</van-button>
							</template>
							<template #icon>
								<van-checkbox class="padding-right-sm" :name="index" ref="checkboxes" />
							</template>
						</van-cell>
					</van-cell-group>
				</van-checkbox-group>
			</van-list>
			<view class="bottom-btn">
				<van-row type="flex" justify="space-around">
					<van-col span="10">
						<van-button type="info" round plain hairline block @click="closeSheet">取消</van-button>
					</van-col>
					<van-col span="10">
						<van-button type="info" round block @click="toSubmit">确定</van-button>
					</van-col>
				</van-row>
			</view>

		</view>
	</van-action-sheet>
</template>

<script>
	export default {
		props: {
			forwardState: {
				type: Boolean,
				default: false
			},
			//类型 1主送 3抄送 4分送
			tagType: {
				type: Number,
				default: 1
			}
		},
		watch: {
			forwardState(val){
				this.showCompo = val
			},
		},
		data() {
			return {
				showCompo:false,//组件是否显示
				emptyData: false,
				searchValue: '',
				// tagType:1,
				page: 1,
				rows: 10,
				formData: {
					tagId: '',
					content: ''
				}, //填写单位名称
				addMore: false,
				result: [], //多选的下标值
				checked: [], //选中的tagId
				checkedName: [], //选中的tagId对应的content
				dataArr: [],
				dataIndex: '', //数组下标
				loading: false,
				finished: true, //不显示加载中
			}
		},
		mounted() {
			this.getCommonTags()
		},
		methods: {
			//关闭sheet
			closeSheet() {
				console.log("关闭: " + JSON.stringify(this.tagType));
				let checkedData = {
					tagType: this.tagType,
					content: this.checkedName.toString(),
					tagId: this.checked.toString()
				}
				this.$emit('closeSheet', checkedData)
			},
			//选中的选项:i--数组所在的下标
			toggle(i) {
				// console.log("i: " + JSON.stringify(i))
				this.$refs.checkboxes[i].toggle()

				// this.dataIndex = i
				// this.checked.push(this.dataArr[i].tagId)
				// this.checkedName.push(this.dataArr[i].content)


			},
			onChange(item) {
				// console.log("item: " + JSON.stringify(item));
				//result: ["04ca78d82672464b86117fe654e42943","1e0faa87e7dc435e97003d474173fbf8"]
				console.log("result: " + JSON.stringify(this.result)); //选中的单位id
				if (this.result.length > 0) {
					this.checked = []
					this.checkedName = []
					this.result.forEach((index, item) => {
						console.log(index);
						this.checked.push(this.dataArr[index].tagId)
						this.checkedName.push(this.dataArr[index].content)
					})
					// console.log("this.checked: " +this.checkedName.toString());
				}

			},
			searchListener(e) {
				this.searchValue = e
				this.getCommonTags()
				console.log("e: " + JSON.stringify(e));
			},
			//删除
			deleteItem(index) {
				this.$dialog.confirm({
						title: '系统提示',
						message: '是否确认删除所选单位?',
					})
					.then(() => {
						console.log("this.checked: " + JSON.stringify(this.checked));
						this.deleteByTagId(this.dataArr[index].tagId)
						//
					})
					.catch(() => {
						// on cancel
					});
			},
			//修改-通过下标index从数组拿数据回显
			editItem(index) {
				this.addMore = true
				// console.log("this.dataArr[this.dataIndex]: " + JSON.stringify(this.dataArr[index]));
				this.formData = this.dataArr[index]
				// console.log("this.formData: " + JSON.stringify(this.formData));
			},
			//添加更多单位
			onAdd() {
				this.addMore = true
			},
			//确定按钮
			toSubmit() {
				this.closeSheet()
				console.log(": " + JSON.stringify(this.checked));
			},
			//发文修改公文要素时获取主送抄送分送数据
			getCommonTags() {
				console.log("tagType----: " + JSON.stringify(this.tagType));
				var _this = this
				this.dataArr = []
				this.$httploading({
					url: this.$http.adornUrl(`/caac/oa/component/commTags/commtags`),
					method: 'get',
					params: this.$http.adornParams({
						'content': this.searchValue,
						'page': this.page,
						'rows': this.rows,
						'tagType': this.tagType, // 类型 1主送 3抄送 4分送
						'systemKey': this.cache.get("userInfo").systemKey,
						'systemFlag': this.cache.get("userInfo").systemFlag, //固定值
					})
				}).then(({
					data
				}) => {
					console.log("获取主送抄送分送数据data: " + JSON.stringify(data));
					if (data.code == 200) {
						this.dataArr = data.data.rows
						if (this.dataArr.length > 0) {
							this.emptyData = false
						} else {
							this.emptyData = true
						}
					}
				})
			},
			//删除
			deleteByTagId(tagId) {
				var _this = this
				this.$http({
					url: this.$http.adornUrl(`/caac/oa/component/commTags`),
					method: 'delete',
					params: this.$http.adornParams({
						'tagId': tagId,
						'systemKey': this.cache.get("userInfo").systemKey,
						'systemFlag': this.cache.get("userInfo").systemFlag, //固定值
					})
				}).then(({
					data
				}) => {
					console.log("删除tagId data: " + JSON.stringify(data));
					if (data.code == 200) {
						this.$toast(data.data.message)
						this.getCommonTags() //重新获取列表信息
					} else {
						console.log("ERROR==>删除tagId data: " + JSON.stringify(data));
					}
				})
			},
			//增加或修改提交表单
			onSubmit() {
				console.log("this.formData: " + JSON.stringify(this.formData));
				this.addOrUpdateTag()
				this.formData.tagId = '' //清空表单数据
				this.formData.content = ''
				this.addMore = false //关闭弹框
			},
			//增加或修改
			addOrUpdateTag() {
				var _this = this
				this.$http({
					url: this.$http.adornUrl(`/caac/oa/component/commTags`),
					method: 'post',
					params: this.$http.adornParams({
						// 'tagId':tagId,
						'tagType': this.tagType,
						'content': this.formData.content,
						'id': this.formData.tagId,
						'systemKey': this.cache.get("userInfo").systemKey,
						'systemFlag': this.cache.get("userInfo").systemFlag, //固定值
					})
				}).then(({
					data
				}) => {
					console.log("增加或修改 data: " + JSON.stringify(data));
					if (data.code == 200) {
						this.$toast('操作成功')
						this.getCommonTags() //重新获取列表信息
					} else {
						console.log("ERROR==>增加或修改 data: " + JSON.stringify(data));
					}
				})
			},

		}
	}
</script>

<style>
	.van-action-sheet {
		z-index: 9999;
		min-height: 80%;
	}

	.search-add {
		position: fixed;
		height: 120rpx;
		width: 100%;
		z-index: 90;
	}

	.content {
		margin: 120rpx 0;
	}

	.bottom-btn {
		background-color: #FFFFFF;
		padding: 15rpx 0;
		position: fixed;
		width: 100%;
		height: 120rpx;
		bottom: 0;
		z-index: 999;
	}

	.popup-box {
		display: block;
		width: 100%;
		height: auto;
		padding: 100rpx 0 20rpx;
	}

	/deep/ .van-cell__title {
		min-width: 20% !important;
	}
</style>
